  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <title>Have fun ❤︎</title>
      <link rel="stylesheet" href="styles.css">
    </head>
    <body>
      <header class="welcome-message" role="banner">
        <div class="container">
          <h1 class="welcome-message-title">
            Hey there! Thanks for contributing to
            <a href="http://neat.bourbon.io">Neat</a>.
          </h1>
          <p>
            The purpose of this page is to help contributors view and test
            changes to Neat.
          </p>
        </div>
      </header>
      <main role="main">
        <h3>Basic</h3>
        <section class="page-section zero">
        <code>@include outer-container;</code>
          <div class="page-section-inner zero-alpha">
            <code>@include span-columns(6);</code>
          </div>
          <div class="page-section-inner zero-beta">
            <code>@include span-columns(6);</code>
          </div>
        </section>
        <h3>Multiple rows</h3>
        <section class="page-section first">
          <code>@include outer-container;</code>
          <div class="page-section-inner first-alpha">
            <code>(1)</code>
          </div>
          <div class="page-section-inner first-beta">
            <code>
              @include span-columns(11);<br>
              @include omega();
            </code>
          </div>
          <div class="page-section-inner first-gamma">
            <code>
              @include span-columns(2);
              </code>
          </div>
          <div class="page-section-inner first-delta">
            <code>
              @include span-columns(10);<br>
              @include omega();
            </code>
          </div>
          <div class="page-section-inner first-epsilon">
            <code>
              @include span-columns(3);
            </code>
          </div>
          <div class="page-section-inner first-zeta">
            <code>
              @include span-columns(9);<br>
              @include omega();
            </code>
          </div>
          <div class="page-section-inner first-eta">
            <code>
              @include span-columns(4);
            </code>
          </div>
          <div class="page-section-inner first-theta">
            <code>
              @include span-columns(8);<br>
            @include omega();
            </code>
          </div>
          <div class="page-section-inner first-iota">
            <code>
              @include span-columns(5);
            </code>
          </div>
          <div class="page-section-inner first-kappa">
            <code>
              @include span-columns(7);<br>
              @include omega();
            </code>
          </div>
          <div class="page-section-inner first-lambda">
            <code>
              @include span-columns(6);
            </code>
          </div>
          <div class="page-section-inner first-mu">
            <code>
              @include span-columns(6);<br>
              @include omega();
            </code>
          </div>
        </section>
        <h3>Nesting columns</h3>
        <section class="page-section second">
          <code>@include outer-container;</code>
          <div class="page-section-inner second-alpha">
            <code>@include span-columns(4);</code>
          </div>
          <div class="page-section-inner second-beta">
            <code class="block">@include span-columns(8);</code>
            <aside class="second-beta-alpha">
              <code>@include span-columns(4 of 8);</code>
            </aside>
            <article class="second-beta-beta">
              <code>@include span-columns(4 of 8);</code>
            </article>
          </div>
        </section>
        <h3>Table grid</h3>
        <section class="page-section third">
          <code>@include outer-container;</code>
          <div class="page-section-inner third-dummy">
            <code>
              @include fill-parent();<br>
              @include row(table);
            </code>
          </div>
          <div class="page-section-inner third-alpha">
            <aside class="third-alpha-alpha">
              <code>
                @include span-columns(4);<br>
                @include pad();
              </code>
            </aside>
            <article class="third-alpha-beta">
              <code>
                @include span-columns(8);<br>
                @include reset-display;
              </code>
            </article>
          </div>
        </section>
        <h3>Shifting columns</h3>
        <section class="page-section fourth">
          <code>@include outer-container;</code>
          <div class="page-section-inner fourth-alpha">
            <code>
              @include span-columns(6);<br>
              @include shift(3);
            </code>
          </div>
        </section>
        <h3>Automatic rows</h3>
        <div class="code">
          <code>@include outer-container;</code>
        </div>
        <section class="page-section fifth">
          <div class="box">
<pre>
  .box {
    @include span-columns(3);
    @include omega(4n);
  }
</pre>
          </div>
          <div class="fifth-box page-section-inner">
             <code>.box</code>
          </div>
          <div class="fifth-box page-section-inner">
             <code>.box</code>
          </div>
          <div class="fifth-box page-section-inner">
             <code>.box</code>
          </div>
          <div class="fifth-box page-section-inner">
             <code>.box</code>
          </div>
          <div class="fifth-box page-section-inner">
             <code>.box</code>
          </div>
          <div class="fifth-box page-section-inner">
             <code>.box</code>
          </div>
          <div class="fifth-box page-section-inner">
            <code>.box</code>
          </div>
          <div class="fifth-box page-section-inner">
             <code>.box</code>
          </div>
          <div class="fifth-box page-section-inner">
             <code>.box</code>
          </div>
          <div class="fifth-box page-section-inner">
             <code>.box</code>
          </div>
          <div class="fifth-box page-section-inner">
             <code>.box</code>
          </div>
        </section>
        <h3>Media Queries</h3>
        <section class="page-section sixth">
<pre>
  @include outer-container;
  $mobile: new-breakpoint(max-width 500px 4);
</pre>
          <div class="page-section-inner sixth-alpha">
<pre>
  @include span-columns(4);

  @include media($mobile) {
    @include span-columns(3);
  }
</pre>
          </div>
          <div class="page-section-inner sixth-beta">
<pre>
  @include span-columns(8);
  @include media($mobile) {
    @include span-columns(3);
  }
</pre>
          </div>
        </section>
      </main>
    </body>
  </html>
